<template>

    <div class="container-tag">
      <el-card class="box-card">
        <!-- 面包屑 -->
      <div>
          <el-breadcrumb
            :separator-icon="ArrowRight"
            v-if="getSubject.id && getSubject.name"
          >
            <el-breadcrumb-item>学科管理111</el-breadcrumb-item>
            <el-breadcrumb-item>{{ getSubject.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>标签管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 筛选 -->
        <div class="filter-box">
          <el-row>
            <!-- 表单 -->
            <el-col :span="18">
              <el-form inline :model="query">
                <el-form-item label="标签名称">
                  <el-input v-model="query.tagName" clearable />
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="query.state" placeholder="请选择" clearable>
                    <el-option label="已启用" value="1" />
                    <el-option label="已禁用" value="0" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button @click="clear()">清除</el-button>
                  <el-button type="primary" @click="getList()">搜索</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <!-- 按钮 -->
            <el-col :span="6" style="text-align: right">
              <el-button v-if="getSubject.id && getSubject.name" type="text" icon="el-icon-back" @click="$router.back()">返回学科</el-button>
              <el-button :icon="Edit" type="success" @click="dialogVisible = true"
                >新增标签</el-button
              >
            </el-col>
          </el-row>
          <el-dialog v-model="dialogVisible" title="新增目录" width="30%">
            <el-form
              v-loading="isLoading"
              ref="formRef"
              :model="form"
              :rules="rules"
              label-width="120px"
              autocomplete="off"
            >
              <el-form-item label="目录名称" prop="tagName">
                <el-input v-model="form.tagName" />
              </el-form-item>
              <el-form-item v-if="!(getSubject.id && getSubject.name)" label="所属学科" prop="subjectID">
                <el-select
                  v-model="form.subjectID"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in subject"
                    :key="item.id"
                    :label="item.subjectName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-form>
            <template #footer>
              <el-row type="flex" justify="center">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="add()"> 确定 </el-button>
              </el-row>
            </template>
          </el-dialog>
        </div>
        <!-- 总计 -->
        <el-alert
          :title="`数据一共${total}条`"
          type="info"
          :closable="false"
          show-icon
        />
        <!-- 表格 -->
        <el-table :data="lists" style="width: 100%; margin-top: 20px">
          <el-table-column
            label="序号"
            type="index"
            width="80px"
          ></el-table-column>
          <el-table-column label="所属学科" prop="subjectName"></el-table-column>
          <el-table-column label="标签名称" prop="tagName"></el-table-column>
          <el-table-column label="创建者" prop="username"></el-table-column>
          <el-table-column label="创建日期" prop="addDate"></el-table-column>
          <el-table-column label="状态" prop="state">
            <template #default="{ row }">{{
              row.state === 1 ? '已启用' : '已禁用'
            }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <div class="flex justify-space-between mb-4 gap-4">
                <el-button
                  type="text"
                  :disabled="row.state ? false : true"
                  @click="disable(row)"
                  >禁用</el-button
                >
             
                <el-button
                  type="text"
                  :disabled="row.state ? true : false"
                  @click="openEdit(row)"
                
                  >修改</el-button
                > 
                <el-button
                  type="text"
                  :disabled="row.state ? true : false"
                  @click="deleteitems(row)"
                  >删除</el-button
                >
              </div>
            </template>
            
          </el-table-column>
        </el-table>
        <el-dialog v-model="updateDialog" title="修改目录" width="30%">
                  <el-form
                    v-loading="isLoading"
                    ref="updateformRef"
                    :model="updateform"
                    :rules="rules"
                    label-width="120px"
                    autocomplete="off"
                  >
                    <el-form-item label="目录名称" prop="tagName">
                      <el-input v-model="updateform.tagName" />
                    </el-form-item>
                    <el-form-item label="所属学科" v-if="!(getSubject.id && getSubject.name)" prop="subjectID">
                      <el-select
                        v-model="updateform.subjectID"
                        placeholder="请选择"
                        clearable
                      >
                        <el-option
                          v-for="item in subject"
                          :key="item.id"
                          :label="item.subjectName"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                  </el-form>
                  <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="cancelUpdate()"
                        >取消修改</el-button
                      >
                      <el-button type="primary" @click="update()"> 确定修改 </el-button>
                    </span>
                  </template>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination
          style="margin-top: 20px; text-align: right"
          v-model:current-page="query.page"
          v-model:page-size="query.pagesize"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="prev,pager,next,sizes,jumper"
          :total="total"
          @size-change="handleSizeChange"
        />
      </el-card>
    </div>
  </template>
    
    <script setup lang="ts">
  import { Edit,ArrowRight  } from '@element-plus/icons-vue'
  import { ElMessageBox, ElMessage } from 'element-plus'
  import { reactive, ref, watch,computed } from 'vue'
  import { useRoute } from 'vue-router';
  import {
    getTagsList,
    addTags,
    changeStateTags,
    deleteTags,
    getProjectList,
    updateTags
  } from '@/api/hmmm/tag/tag'
  import {
    TagsItem,
    TagsQuery,
    ProjectsQuery,
    ProjectsItem,
  } from '@/api/hmmm/tag/types'
  const route = useRoute()
  const rules = {
    tagName: [{ required: true, message: '目录名不能为空', trigger: 'blur' }]
  }
  const projects = reactive<ProjectsQuery>({
    page: 1,
    pagesize: 10
  })
  const formRef = ref()
  const updateformRef = ref()
  const total = ref(0)
  const subject = ref()
  let isLoading = ref(false)
  const dialogVisible = ref(false)
  let updateDialog = ref(false)
  const lists = ref<TagsItem[]>([])
  const form = reactive({ subjectID: '', tagName: '' })
  const updateform = reactive({subjectID: '', tagName: '',id:''})
  const query = reactive<TagsQuery>({
    page: 1,
    pagesize: 10
  })
  const getSubject =computed(()=>{
    return route.query||{}
  })
  // 学科获取
  function projectList() {
    getProjectList(projects).then(data => {
      subject.value = data.data.items as ProjectsItem[]
      console.log('学科',subject.value)
    })
  }
  getSubject.value&&projectList()
  // 表格获取
  function getList() {
   
    query.subjectID = getSubject.value.id || null
    getnew()
    isLoading.value = true
    getTagsList(query)
      .then(data => {
        console.log(query, data.data)
        total.value = data.data.counts
        lists.value = data.data.items as TagsItem[]
        isLoading.value = false
      })
      .catch(e => {
        ElMessage.error(e.message || '获取标签失败')
        isLoading.value = false
      })
  }
  getList()
  // 清除筛选表单
  function clear() {
    query.subjectID = ''
    query.tagName = ''
     delete query.state
    getList()
  }
  // 清除表单时query对象键值对为空后调接口找不到了以此筛选清除空键值对
  function getnew(){
  for(let item in query){
    if(query[item]===''){
      delete query[item]
    }
  }}
  const handleSizeChange = (val: number) => {
    query.pagesize = val
    query.page = 1
  }
  // 分页操作时重新获取表格数据
  watch([() => query.page, () => query.pagesize], getList)
  // 禁用操作(操作无响应)
  function disable(row: any) {
    const data = { id: row.id, state: row.state }
    ElMessageBox.confirm('确定要禁用此标签吗?', 'Warning', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        await changeStateTags(data)
        getList()
        ElMessage({
          type: 'success',
          message: '禁用成功'
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '禁用取消'
        })
      })
  }
  // 删除操作
  function deleteitems(row: any) {
    const data = { id: row.id, state: row.state }
    ElMessageBox.confirm('确定要删除此标签吗?', 'Warning', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        // console.log(row,data.id)
        await deleteTags(data.id)
        getList()
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '删除取消'
        })
      })
  }
  // 添加标签
  function add() {
    console.log(!getSubject.value)
    formRef.value.validate(async (isOK: boolean) => {
      // console.log(form)
      if (!isOK) return
      await addTags(form)
      ElMessage({ message: '操作成功', type: 'success' })
      getList()
      dialogVisible.value = false
    })
  }
  // 取消添加
  function cancel() {
    formRef.value.resetFields()
    form.subjectID = ''
    form.tagName = ''
    dialogVisible.value = false
  }
  function  openEdit(row:any){
    updateDialog.value= true,
    updateform.id=row.id,
    updateform.subjectID=row.subjectID
    updateform.tagName=row.tagName
    // console.log(updateform)
  }
  // 更新标签
  function update(){
    updateformRef.value.validate(async(isOK: boolean) => {
      if (!isOK) return
      // console.log(updateform)
    await  updateTags(updateform)
    ElMessage({ message: '操作成功', type: 'success' })
    updateDialog.value= false
    getList()
    })
  }
  // 取消更新
  function cancelUpdate(){
    updateformRef.value.resetFields()
    updateform.subjectID = ''
    updateform.tagName = ''
    updateDialog.value = false
  }
  
  </script>
    
    <style lang="scss" scoped>
  .el-alert {
    margin: 20px 0 0;
  }
  .el-alert:first-child {
    margin: 0;
  }
  .container-tag {
    padding: 10px 15px;
  }
  .demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
  }
  .demo-pagination-block .demonstration {
    margin-bottom: 16px;
  }
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
  .el-breadcrumb{
  
   color: black;
   font-size: 15px;
   margin: 20px 0px;
  }
  </style>
    

  
